<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<!--自动检测屏幕大小-->		
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">		
		
		<title></title>
		<link rel="stylesheet" type="text/css" href="js/bootstrap.css"/>
		<script src="js/jquery-3.2.0.min.js"></script>
		<script src="js/bootstrap.js"></script>
		
		<style type="text/css">
            h3{
                color: blue
            }
			.aaa{
				height: 30px;width:100px;
				background: red;
			}
            .bbb{
                height: 30px;width:100px;
                background: green;
                margin: auto
            }
		</style>
		
	</head>
	<body class="container">
		<h3 class="page-header">情境文本颜色</h3>
		 
		<p class="text-muted">颜色稍淡 ..text-muted</p>
		<p class="text-primary">首选项 ..text-primary</p>
		<p class="text-success">成功 ..text-success</p>
		<p class="text-info">一般信息 ..text-info</p>
		<p class="text-warning">警告 ..text-warning</p>
		<p class="text-danger">危险 ..text-danger</p>
        
        <h3 class="page-header">文本背景颜色</h3>
        <p class="bg-primary">首选项 ..bg-primary</p>
		<p class="bg-success">成功 ..bg-succ</p>
		<p class="bg-info">一般信息 ..bg-info</p>
		<p class="bg-warning">警告 ..bg-warning</p>
		<p class="bg-danger">危险 ..bg-danger</p>
        
        
        
<!--**********************************************************************************-->        
        <h3 class="page-header"> span.close 关闭按钮</h3>
        <p class="bg-info">关闭按钮<span class="close">&times;</span></p>
        <script>
           $('.close').click(function(){
           	$(this).parent().hide(); 
           })
        </script>
        
        
        <h3 class="page-header">span.caret 倒三角，更多</h3>
        <p class="bg-info">更过内容<span class="caret"></span></p>
        <button class="btn btn-primary">更多<span class="caret"></span></button>
<!--**************************************************************************************-->
                
        <h3 class="page-header">浮动 float：..pull-left，..pull-right</h3>
        <div class="pull-right">..pull-right 向右浮动</div>
        <div class="pull-left">..pull-left 向左浮动</div>
        
        
 <!--*********************************************************************************-->       
        
        <h3 class="page-header clearfix">清除浮动 ..clearfix</h3>
        <div class="pull-left">..pull-left 向左浮动</div>
        <div class="clearfix"></div>
        <div class="pull-right">..pull-right 向右浮动</div>
        
        <h3 class="page-header clearfix">让块标签居中 ..center-block, 和        margin:0 auto一样</h3>
        <div class="aaa center-block text-center" >..center-block</div>
        <div class="bbb" >margin：0 auto</div>
        
        
	</body>
</html>
